<template>
  <!-- <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪水：{{person.job.j1.salary}}</h2>
  <button type="button" @click="person.name += '-'">修改名字</button>
  <button type="button" @click="person.age++">修改年龄</button>
  <button type="button" @click="person.job.j1.salary++">修改年龄</button> -->

  <!-- <div>{{ person }}</div>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{salary}}</h2>
  <button type="button" @click="name += '-'">修改名字</button>
  <button type="button" @click="age++">修改年龄</button>
  <button type="button" @click="salary++">修改年龄</button> -->

  <div>{{ person }}</div>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j1.salary}}</h2>
  <button type="button" @click="name += '-'">修改名字</button>
  <button type="button" @click="age++">修改年龄</button>
  <button type="button" @click="job.j1.salary++">修改年龄</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, toRef } from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    const name1 = person.name // 字符串，基本类型
    console.log('%%%', name1)

    const name2 = toRef(person, 'name') // RefImpl对象
    console.log('###', name2)

    // 返回一个对象，暴露给模板使用（常用）
    /* return {
      person
    } */

    // 此处方法不能响应数据
    /* return {
      name: person.name,
      age: person.age,
      salary: person.job.j1.salary
    } */

    // 使用ref，复制源数据，然后进行修改
    /* return {
      person,
      name: ref(person.name),
      age: ref(person.age),
      salary: ref(person.job.j1.salary)
    } */

    // 使用toRef，修改源数据
    /* return {
      person,
      name: toRef(person, 'name'),
      age: toRef(person, 'age'),
      salary: toRef(person.job.j1, 'salary')
    } */


    // 使用toRefs对所有属性进行处理
    return {
      person,
      ...toRefs(person)
    }
  }
}
</script>

<style>

</style>
